<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>懒洋洋电商网站</title>
  <link rel="stylesheet" href="../static/dist/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">懒洋洋电商系统后台</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item layui-hide-xs"><a href="">首页</a></li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="../static/logo.jpg" class="layui-nav-img">
          懒洋洋
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">个人资料</a></dd>
          <dd><a href="">设置</a></dd>
          <dd><a href="">退出</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">信息管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" onclick="loadUserTable()">用户信息</a></dd>
            <dd><a href="javascript:;">会员信息</a></dd>
            <dd><a href="javascript:;">订单信息</a></dd>
            <!--            <dd><a href="">the links</a></dd>-->
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">商品管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" onclick="loadGoodTypeTable()">商品类别</a></dd>
            <dd><a href="javascript:;">所有商品</a></dd>
            <!--            <dd><a href="">超链接</a></dd>-->
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;" >权限管理</a></li>
        <li class="layui-nav-item"><a href="">技术支持</a></li>
      </ul>
    </div>
  </div>

  <div class="layui-body">
    <div id="demoTable">
      <table id="demo" lay-filter="demo" >
        <thead>
        <tr>
          <th lay-data="{field:'role', width:470}">团队角色</th>
          <th lay-data="{field:'username', width:470}">成员姓名</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>项目经理</td>
          <td>刘斯伟</td>
        </tr>
        <tr>
          <td>技术经理</td>
          <td>刘雨卓</td>
        </tr>
        <tr>
           <td>产品经理</td>
          <td>何远航</td>
        </tr>
        <tr>
           <td>Team成员</td>
          <td>熊凯</td>
        </tr>
        <tr>
          <td>Team成员</td>
          <td>张倩</td>
        </tr>
        </tbody>
      </table>
    </div>
    <!-- 内容主体区域 -->
    </br></br></br></br></br></br>
    <div class="layui-text layui-col-md7 layui-col-md-offset2 layui-font-32">欢迎来到懒洋洋电商网站后台管理界面</div>


  </div>

  <div class="layui-footer ">
    <!-- 底部固定区域 -->
    技术支持:Python开发—懒洋洋队

  </div>
</div>
<script src="../static/dist/layui.js"></script>
<script>
  //JS
  layui.use(['element', 'layer', 'util'], function () {
    var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;

    //头部事件
    util.event('lay-header-event', {
      //左侧菜单事件
      menuLeft: function (othis) {
        layer.msg('展开左侧菜单的操作', {icon: 0});
      }
      , menuRight: function () {
        layer.open({
          type: 1
          , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
          , area: ['260px', '100%']
          , offset: 'rt' //右上角
          , anim: 5
          , shadeClose: true
        });
      }
    });

  });

</script>
<script>
  layui.use('table', function(){
    var table = layui.table;
    //第一个实例
    table.init('demo', {
      height: 240 //设置高度
    });
  });


  function loadGoodTypeTable() {
    layui.use('table', function(){
      var table = layui.table;
      //第一个实例
      table.reload('demo',{
        elem: '#demo'
        , height: 500
        , url: 'http://localhost:5000/goods/type' //数据接口
        , page: true //开启分页
        , request: {
          pageName: 'curr' //页码的参数名称，默认：page
          , limitName: 'nums' //每页数据量的参数名，默认：limit
        }

        , cols: [[ //表头
          {field: 'id', title: 'ID', width: 300, sort: true, fixed: 'left'}
          , {field: 'name', title: '名称', width: 300}
          , {field: 'num', title: '数量', width: 300, sort: true}
          , {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barDemo'}
        ]]
      });

    });
  }




  function loadUserTable() {
    layui.use('table', function(){
      var table = layui.table;
      table.reload('demo', {
        elem: '#demo'
        , height: 500
        , url: 'http://localhost:5000/test/users' //数据接口
        , page: true //开启分页
        , request: {
          pageName: 'curr' //页码的参数名称，默认：page
          , limitName: 'nums' //每页数据量的参数名，默认：limit
        }
        , cols: [[ //表头
          {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
          , {field: 'username', title: '名称', width: 80}
          , {field: 'sex', title: '性别', width: 80}
          , {field: 'address', title: '地址', width: 300 }
          , {field: 'email', title: '邮箱', width: 200}
          ,{fixed: 'right', title: '操作',width:200, align:'center', toolbar: '#barDemo'}
        ]]
      });
    });



  }
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
  table.on('tool(demo)', function(obj){
     var data = obj.data;
     var layEvent = obj.event;
     var tr = obj.tr;
     if(layEvent === 'detail'){ //查看
  }
  });
</script>
</body>
</html>